<template>
    <div class="land-rent-plot">
        <!-- 这里放置地租图的实现 -->
        <div ref="chart" style="width: 100%; height: 100%;"></div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const chart = ref(null);

onMounted(() => {
    const myChart = echarts.init(chart.value);

    const option = {
        title: {
            text: '地租变化曲线',
            left: 'center'
        },
        xAxis: {
            type: 'value',
            name: '距离城市中心(km)'
        },
        yAxis: {
            type: 'value',
            name: '地租'
        },
        series: [{
            data: [
                [0, 120],
                [10, 90],
                [20, 70],
                [30, 50],
                [40, 30],
                [50, 10]
            ],
            type: 'line',
            smooth: true
        }]
    };

    myChart.setOption(option);

    window.addEventListener('resize', () => {
        myChart.resize();
    });
});
</script>

<style scoped>
.land-rent-plot {
    width: 100%;
    height: 100%;
}
</style>